<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{ __('微信收银台') }}</title>
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
            background: #E3E8F6;
            font-family: "PingHei", "Lucida Grande", "Lucida Sans Unicode",
            "Helvetica", "Arial", "Verdana", "sans-serif", "Microsoft Yahei", "微软雅黑";
        }

        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .header {
            margin: 0;
            background: #FFF;
            height: 80px;
            line-height: 80px;
            border: 1px solid #DBE0EC;
            color: #333;
            font-size: 16px;
        }

        .header .title {
            margin: 0 auto;
            width: 118px;
            background: url(https://bce.bdstatic.com/console/static/finance/2.0.157.1/asset/img/weixin.png) left center no-repeat;
            padding: 0 0 0 62px;
        }

        .main {
            width: 960px;
            margin: 30px auto 35px auto;
        }

        .main .top {
            height: 9px;
            background: url(https://bce.bdstatic.com/console/static/finance/2.0.157.1/asset/img/top.png) 0 0 no-repeat;
        }

        .main .title {
            height: 80px;
            line-height: 80px;
            padding: 0 97px 0 153px;
            font-size: 18px;
            background: #FFF;
            border-color: #DDE2ED;
            border-style: solid;
            border-width: 0 1px;
        }

        .main .title label,
        .main .title span {
            color: #E0151B;
        }

        .main .title label {
            font-size: 12px;
        }

        .main .middle {
            border-color: #DDE2ED;
            border-style: solid;
            border-width: 0 1px;
            background: #FFF;
            padding: 0 85px;
        }

        .main .middle .content {
            border-top: 1px dashed #F0F0F0;
            padding: 35px 35px 20px 35px;
        }

        .main .middle .content:after {
            content: "";
            clear: both;
            display: block;
        }

        .code {
            float: left;
            width: 200px;
            height: 218px;
        }

        .ep-wxpay-qrcode-notice {
            height: 30px;
            line-height: 30px;
            background-color: #00c800;
            font-size: 12px;
            color: #fff;
            text-align: center;
            margin-bottom: 20px;
        }

        .tip {
            float: left;
            width: 260px;
            height: 255px;
        }

        .middle ul {
            margin: 16px 0 0 263px;
        }

        .middle ul label {
            color: #999;
        }

        .middle li {
            list-style: none;
            line-height: 38px;
        }

        .bottom {
            background: url(https://bce.bdstatic.com/console/static/finance/2.0.157.1/asset/img/bottom.png) no-repeat;
            height: 43px;
        }

        .footer {
            padding: 0;
            height: 75px;
            border-color: #DDE2ED;
            border-style: solid;
            border-width: 0 1px 1px 1px;
            background-color: #FFF;
            color: #CCC;
            text-align: center;
        }

        .footer p {
            margin: 0;
            padding: 0;
            line-height: 30px;
            font-size: 14px;
        }

        .error {
            height: 200px;
            background: #FFF;
            padding-top: 154px;
            display: none;
        }

        .error .content {
            width: 200px;
            min-height: 110px;
            margin: 0 auto;
            padding-left: 117px;
            background: url(https://bce.bdstatic.com/console/static/finance/2.0.157.1/asset/img/error.png) left center no-repeat;
        }

        .error .content p {
            margin: 0;
        }

        .error .content .tip {
            padding-top: 20px;
            margin-bottom: 10px;
        }

        .error .content span {
            font-size: 14px;
            color: #999;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="title">{{ __('微信支付') }}</div>
</div>
<div class="main">
    <div class="top"></div>
    <div id="pay">
        <div class="title">
            {{ __('支付金额') }}
            <label>{{ __('￥') }}</label>
            <span id="price">{{ $total_amount }}</span>
        </div>
        <div class="middle">
            <div class="content">
                <div id="container" class="code">
                    <img src="data:image/png;base64, {{$url}}" height="200" width="200" class="ep-wxpay-qrcode">
                    <div class="ep-wxpay-qrcode-notice">{{ __('请打开手机微信，扫一扫完成支付') }}</div>
                </div>
                <div id="container" class="tip">
                    <img src="//midas.gtimg.cn/enterprise/images/ep_sys_wx_tip.jpg">
                </div>
                <ul>
                    <li><label>{{ __('商品名称：') }}</label><span id="commodity">{{ $subject }}</span></li>
                    <li><label>{{ __('交易单号：') }}</label><span id="transactionId">{{ $out_trade_no }}</span></li>
                    <li><label>{{ __('创建时间：') }}</label><span id="createTime">{{ $created_at }}</span></li>
                </ul>

            </div>
        </div>
    </div>
    <div id="error" class="error">
        <div class="content">
            <p class="tip">{{ __('温馨提示') }}</p>
            <p>
                <span id="errorText"></span>
            </p>
        </div>
    </div>
    <div class="bottom"></div>
    <div class="footer">
        <p>{{ env('APP_NAME', '') }}</p>
    </div>
</div>

<script src="{{ mix('js/app.js') }}"></script>
<script src="{{ asset('/js/main.js') }}"></script>
<script type="text/javascript">
    var paying;
    const timeId = setInterval(() => {
        if (paying == 'success') {
            clearInterval(this.timeId)
            window.location.href = '{{ route('pay.index') }}';
        }checkPaymentDone();
    }, 5000);

    function checkPaymentDone() {
        axios.post('{{ route('wechat.return') }}', {
            out_trade_no: $('#transactionId').html()
        }).then(function (response) {
            if(response.data.result.status == true){
                paying = 'success';
            }
        })
    }
</script>

</body>
</html>
